<template>
   <div class="ancestors" @mousedown="documentClickEvent">
    <svg
        style=""
        width="100%"
        height="100%"
        :viewBox="`0 0 ${props.svgCanvas.width} ${props.svgCanvas.height}`"
    >
      <g

          v-for="(item,index) in props.svg_data"
          :key="item.id"
          :id="item.id"
          style="transition:all 1s linear"
          :transform="'translate(' + (item.svgPositionX) + ',' + (item.svgPositionY) + ')' + 'rotate(' + item.angle + ')' + 'scale(' + item.size + ')'"
          @mouseup="mouseUpEvent(item, index, $event)"
          @click="svgClickHandel(props.jsonName,item.title)"
          @contextmenu.stop="contextmenuEvent(item, index, $event)"
      >

        <svg-dynamic
            :component_type="item.type"
            :component_template="props.component_infos.filter(f => f.type == item.type)[0].template"
            :component_props="props.component_infos.filter(f => f.type == item.type)[0].props"
            :component_attr="item"
        />
      </g>
    </svg>
    
  </div>

  <ul ref="contextMenuRef" class="contextMenu" v-show="display_contextmenu">
    <li v-for="(item,index) in contextmenu_data" :key="index" @click="item.fun()">
      <p :class="item.enable ? '' : 'disabled'">
        {{ item.name }}
        <span class="shortcut">{{ item.hotkey }}</span>
      </p>
    </li>
  </ul>

</template>

<script setup lang="ts">
import  SvgDynamic from "./SvgDynamic.vue";
import {ISvgDataLists, ISvgCanvas, IComponentInfo, ISelectSvg} from "../Model";
import  "../assets/css/svgAnimation/index.css";
import {computed, inject, onMounted, reactive, ref,toRef} from "vue";
import App from '..App.vue'
import { createApp } from 'vue'
import { c } from "naive-ui";
import { formProps } from "element-plus";
import { toRaw } from '@vue/reactivity'
const bus:any=inject('$bus')
const emit = defineEmits(['handleBusiness'])
document.onkeydown=(e)=>{
 if(e.key==='Escape'){//监听ESC
  bus.emit('switchMode')
 }
}
const props = defineProps({
    //组件的json格式
    component_infos: {
        type: Array as () => Array<IComponentInfo>,
        required: true,
        default: []
    },
    //要渲染的数据
    svg_data: {
        type: Array as () => Array<ISvgDataLists>,
        required: true,
        default: []
    },
    svgCanvas: {
        type: Object as () => ISvgCanvas,
        default: { width: 1520, height: 720 }
    },
    jsonName:{
      type: String,
      default:'test' 
    },

});

//鼠标左键点击
const mouseUpEvent = (selectsvg: ISvgDataLists, index: number, e: MouseEvent) => {
  e.preventDefault();
  //开始判断点击是否为按钮，按钮则弹出新页面
  if(selectsvg.active_type == 'button'){
    alert("阀门控制页面开发中")
  }
}

const svgClickHandel =(page:string,title:string)=>{
//判断是哪一个页面，处理对应逻辑
    emit('handleBusiness',{page,title})//vue3的事件总线不能传递多个参数，改了好久，只能这样传
}

const contextMenuRef = ref<HTMLElement>();
//显示右键菜单
const display_contextmenu = ref(false);

//右键菜单数据
const contextmenu_data = reactive([{
  name: "查看历史趋势",
  hotkey: "",
  enable: true,
  fun: function () {
    if (!this.enable) {
      return;
    }
    alert("历史曲线页面开发中");
    display_contextmenu.value = false;
  }
}])
/**
 * @description: 鼠标右键
 * @param {*}
 * @return {*}
 */
const contextmenuEvent = (selectsvg: ISvgDataLists, index: number, e: MouseEvent) => {
  e.preventDefault();
  //只有文字才可以点击右键
  if(selectsvg.active_type == 'text'){
    display_contextmenu.value = true;
    (contextMenuRef.value as any).style.left = e.pageX + 'px';
    (contextMenuRef.value as any).style.top = e.pageY + 'px';
  }

}
//点击别处取消右键弹出菜单
const documentClickEvent = (e: MouseEvent) => {
  if (e.button !== 2) {
    display_contextmenu.value = false;
  }
}
</script>

<style scoped>
.contextMenu {
  position: absolute;
  z-index: 99999;
  background: #ffffff;
  padding: 5px 0;
  margin: 0px;
  display: block;
  border-radius: 5px;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
}
.contextMenu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.contextMenu .shortcut {
  width: 115px;
  text-align: right;
  float: right;
}

.contextMenu p {
  text-decoration: none;
  display: block;
  padding: 0px 15px 1px 20px;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
}

.contextMenu p:hover {
  background-color: #0cf;
  color: #ffffff;
  cursor: default;
}

.contextMenu .disabled {
  color: #999;
}
.contextMenu .disabled:hover {
  color: #999;
  background-color: transparent;
}
.contextMenu li.separator {
  border-top: solid 1px #e3e3e3;
  padding-top: 5px;
  margin-top: 5px;
}

.ancestors {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
</style>